<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.div01 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				top: 100px;
				left: 100px;
			}
			
			body,
			html {
				height: 200%;
			}
		</style>
	</head>

	<body>
		<div class="div01">
		</div>
	</body>
	<script type="text/javascript">
		var div01 = document.querySelector(".div01");
		var x = 0;
		var y = 0;
		var offsetX = 0;
		var offsetY = 0;
		var isDown = false;
		/**
		 * var a=undefined; 未定义。什么情况下未定义  var a;
	       var a=null; 为空  
	       var a=NaN; 错误 
	               以上三种相对布尔值都是false
  		 * 
		 * 
		 */
		if ("") {
			console.log("字符串空"); //false
		}
		if ("null") {
			console.log("null" + "空字符串"); //true
		}
		if (null) {
			console.log(null); //false
		}
		console.log(undefined == undefined); //true  。  不能做计算
		console.log(null == null); //true              可以做计算相当于0
		console.log(NaN == NaN); //false ,犯错的原因不同  不能做
		//重点就是：鼠标相对标签的offsetX只能在mousedown那一刻拿到，然后保存取来用。
		div01.addEventListener("mousedown", function(e) {
			offsetX = e.offsetX;
			offsetY = e.offsetY;
			x = e.pageX - offsetX;
			y = e.pageY - offsetY;
			div01.style.left = x + "px";
			div01.style.top = y + "px";
			isDown = true;
			console.log(x);
		});
		document.addEventListener("mousemove", function(e) {
			//鼠标点击的坐标- 鼠标相对div的坐标
			//没有点击向下，不让执行
			if (isDown) {
				x = e.pageX - offsetX;
				y = e.pageY - offsetY;
				div01.style.left = x + "px";
				div01.style.top = y + "px";
				console.log(x);
			}
		});
		document.addEventListener("mouseup", function(e) {
			isDown = false;
			//鼠标点击的坐标- 鼠标相对div的坐标
			//没有点击向下，不让执行
//			x = e.pageX - offsetX;
//			y = e.pageY - offsetY;
//			div01.style.left = x + "px";
//			div01.style.top = y + "px";
		});
		//screenX  代表是整个屏幕
		//pageX    代表的是整个页面（包括滚动区域），除掉地址栏和标题栏。
		//clientX  代表当前可视区域
		//offsetX  代表标签自己的区域
	</script>

</html>